<template>
  <div class="content">
    <div class="current">
      当前城市
    </div>
    <div class="current-city">
      <span>合肥市</span>
    </div>
    <div class="current">
      全部城市
    </div>

    <div class="all-city">
      <span>上海市</span>
      <span>上海市</span>
      <span>上海市</span>
      <span>上海市</span>
      <span>上海市</span>
      <span>上海市</span>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    data(){
      return {
      };
    },
    mounted(){

    },
    methods: {
    },
    filters: {}
  }
</script>


<style scoped>
  .content {
    text-align: left;
  }
  .current{
    padding: .5rem .75rem;
    font-size: .7rem;
    color: #333;
  }
  .current-city{
    background: #fff;
    padding: 1rem .75rem;
  }
  .current-city span{
    font-size: .7rem;
    color: #fff;
    background: #F74C4E;
    border: 1px solid #F74C4E;
    border-radius: 100px;
    padding: .3rem .6rem;
  }

  .all-city{
    background: #fff;
    padding: 1rem .75rem .5rem ;
  }
  .all-city span{
    display:inline-block;
    font-size: .7rem;
    color:#666666;
    background:#fff;
    border: 1px solid #e6e6e6;
    border-radius: 5rem;
    padding:.25rem .6rem;
    margin-right:.5rem;
    margin-bottom:.5rem;
  }
</style>
